<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>个人中心</title>
        <link href="/static/lib/layui/css/layui.css" rel="stylesheet"/>
        <link href="/static/css/style.css" rel="stylesheet">
        <style>
            body {
                background-color: #f3f5fb;
            }

            .layui-tree {
                position: absolute;
                top: 60px;
                bottom: 0;
                left: 0;
                width: 200px;
                background-color: #fff;
                border: 1px solid #ccc;
            }

            .tree-item > a {
                display: inline-block;
                text-align: center;
                height: 50px;
                width: 100%;
                line-height: 50px;
                font-size: 15px;
                border-bottom: 1px solid #ccc;
            }

            .tree-item.active > a {
                color: #1E9FFF
            }

            .tree-item:hover > a {
                background-color: #ccc;
                color: #1E9FFF
            }

            .main {
                position: absolute;
                top: 60px;
                right: 0;
                left: 0;
                bottom: 0;
                margin-left: 200px;
                padding: 20px 30px;
            }

            .layui-card {
                display: none;
                width: 100%;
            }

            .layui-card.active {
                display: block;
            }

            .layui-card-header {
                color: #000000;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <div th:insert="~{header}"></div>
        <ul class="layui-tree">
            <li class="tree-item active">
                <a href="javascript:show('profile')">
                    <cite>个人资料</cite>
                </a>
            </li>
            <li class="tree-item">
                <a href="javascript:show('updatePass')">
                    <cite>修改密码</cite>
                </a>
            </li>
            <li class="tree-item">
                <a href="javascript:show('bindPhone')">
                    <cite>绑定手机</cite>
                </a>
            </li>
            <li class="tree-item">
                <a href="javascript:show('bindEmail')">
                    <cite>绑定邮箱</cite>
                </a>
            </li>
            <li class="tree-item">
                <a href="javascript:show('loginLog')">
                    <cite>登录日志</cite>
                </a>
            </li>
        </ul>
        <div class="main">
            <div class="layui-card active" id="profile">
                <div class="layui-card-header">个人资料</div>
                <div class="layui-card-body">
                    <form class="layui-form" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="username">用户名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" disabled id="username" name="username"
                                       placeholder="用户名" style="border: none" th:value="${u.username}" type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="realName">真实姓名</label>
                            <div class="layui-input-block">
                                <input autocomplete="off" class="layui-input" id="realName" name="realName"
                                       placeholder="真实姓名" th:value="${u.realName}" type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input name="sex" th:checked="${u.sex == 0}" title="男" type="radio" value="0">
                                <input name="sex" th:checked="${u.sex == 1}" title="女" type="radio" value="1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="age">年龄</label>
                            <div class="layui-input-block">
                                <input autocomplete="off" class="layui-input" id="age" lay-verify="number" max="100" min="0"
                                       name="age" placeholder="输入年龄" th:value="${u.age}" type="number">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-filter="updateProfile" lay-submit>保存修改
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" id="updatePass">
                <div class="layui-card-header">修改密码</div>
                <div class="layui-card-body">
                    <form class="layui-form" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="username1">用户名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" disabled id="username1" name="username1"
                                       placeholder="用户名" style="border: none"
                                       th:value="${u.username}" type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="oldPassword">原密码</label>
                            <div class="layui-input-block">
                                <input autocomplete="off" class="layui-input" id="oldPassword"
                                       lay-reqText="请输入原密码" lay-verify="required" name="oldPassword"
                                       placeholder="输入原密码" required type="password">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="newPassword">新密码</label>
                            <div class="layui-input-block">
                                <input autocomplete="off" class="layui-input" id="newPassword"
                                       lay-reqText="请输入新密码" lay-verify="required" name="newPassword"
                                       placeholder="密码必须包含大小写字母、数字、特殊符号，且长度为8~16！" required type="password">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-filter="updatePassBtn" lay-submit>确认修改
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" id="bindPhone">
                <div class="layui-card-header">绑定手机</div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="bindPhoneForm">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <p class="text-dark-gray">
                                    一个手机号只能绑定一个帐号。绑定手机号可用于登录，将作为您身份认证的重要方式，请谨慎操作！
                                </p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="phone">手机号</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="phone"
                                       lay-verify="required|phone" required lay-reqText="请输入手机号"
                                       name="phone" placeholder="手机号"
                                       th:value="${u.phone}" type="tel">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-filter="bindPhoneBtn" lay-submit>确认修改
                                </button>
                                <button class="layui-btn layui-btn-primary" id="unbindPhoneBtn"
                                        lay-filter="unbindPhoneBtn" lay-submit
                                        th:attr="style=${(u.phone != null and u.phone != '')?'display:inline-block':'display:none'}">
                                    解除绑定
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" id="bindEmail">
                <div class="layui-card-header">绑定邮箱</div>
                <div class="layui-card-body">
                    <div class="layui-form" lay-filter="bindEmailForm">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <p class="text-dark-gray">
                                    一个邮箱只能绑定一个帐号。绑定的邮箱可用于登录，请填写本人真实邮箱！
                                </p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="email">邮箱</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="email"
                                       lay-verify="required|email" lay-reqText="请填写邮箱" required
                                       name="email" placeholder="输入邮箱"
                                        th:value="${u.email}" type="email">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="code">验证码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" id="code"
                                       lay-verify="required" lay-reqText="请填写验证码"
                                       name="code" placeholder="输入验证码"
                                       type="text" style="width: 100px;display: inline">
                                <button class="layui-btn layui-btn-primary" id="sendCodeBtn">获取验证码</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-filter="bindEmailBtn" lay-submit>
                                    确认修改
                                </button>
                                <button class="layui-btn layui-btn-primary" lay-filter="unbindEmailBtn" lay-submit
                                        id="unbindEmailBtn"
                                        th:attr="style=${(u.email != null and u.email != '')?'display:inline-block':'display:none'}">
                                    解除绑定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card" id="loginLog">
                <div class="layui-card-header">登录日志</div>
                <div class="layui-card-body">
                    <span>以下是您最近的登录记录，若存在异常登录记录，请尽快修改密码！</span>
                    <button class="layui-btn layui-btn-normal layui-btn-sm"
                            id="cleanLoginLogBtn">清空登录记录</button>
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>客户端</th>
                                <th>系统</th>
                                <th>地点</th>
                                <th>ip</th>
                                <th>时间</th>
                            </tr>
                        </thead>
                        <tbody id="loginLogBody">
                        </tbody>
                    </table>
                    <div id="page" style="text-align: right"></div>
                </div>
            </div>
        </div>
    </body>
    <script src="/static/lib/layui/layui.all.js"></script>
    <script src="/static/lib/jquery-1.9.1.min.js"></script>
    <script>
        $(".layui-tree li").click(function () {
            $(this).addClass("active").siblings().removeClass('active');
        });

        function show(id) {
            let $1 = $('#' + id);
            if(id === "loginLog")
                getLoginLog(1,10);
            $1.show()
            $1.siblings().hide();
        }

        layui.use('form', function () {
            let form = layui.form;
            //修改基本资料
            form.on('submit(updateProfile)', function (data) {
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.post('/user/modifyProfile', data.field, function (resp) {
                    console.log(resp)
                    if (resp.code === 500) {
                        layer.msg(resp.msg, {icon: 5});
                    } else if (resp.code === 200) {
                        layer.msg("修改成功！", {icon: 6});
                    } else {
                        layer.msg(resp.msg, {icon: 0});
                    }
                }).fail(function () {
                    layer.msg('修改失败！', {icon: 5});
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //修改密码
            form.on('submit(updatePassBtn)', function (data) {
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.post('/user/modifyPassword', data.field, function (resp) {
                    console.log(resp)
                    if (resp.code === 500) {
                        layer.msg(resp.msg, {icon: 5});
                    } else if (resp.code === 200) {
                        layer.msg("修改成功！", {icon: 6});
                    } else {
                        layer.msg(resp.msg, {icon: 0});
                    }
                }).fail(function () {
                    layer.msg('修改失败！', {icon: 5});
                });
                return false;
            });
            //绑定手机号
            form.on('submit(bindPhoneBtn)', function (data) {
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.post('/user/bindPhone', data.field, function (resp) {
                    console.log(resp)
                    if (resp.code === 500) {
                        layer.msg(resp.msg, {icon: 5});
                    } else if (resp.code === 200) {
                        layer.msg("修改成功！", {icon: 6});
                        $("#unbindPhoneBtn").show()
                    } else {
                        layer.msg(resp.msg, {icon: 0});
                    }
                }).fail(function () {
                    layer.msg('修改失败！', {icon: 5});
                });
                return false;
            });
            //解绑手机号
            form.on('submit(unbindPhoneBtn)', function (data) {
                layer.confirm("<span class='text-danger'>手机号是您身份认证的重要方式，解绑之后将不能使用手机号登录！确认解绑？</span>",
                    {
                        btn: ['确认', '取消']
                    }, function () {
                        $.post('/user/unbindPhone', data.field, function (resp) {
                            console.log(resp)
                            if (resp.code === 500) {
                                layer.msg(resp.msg, {icon: 5});
                            } else if (resp.code === 200) {
                                layer.msg("解绑成功！", {icon: 6});
                                form.val("bindPhoneForm",{phone:""})
                                $("#unbindPhoneBtn").hide()
                            } else {
                                layer.msg(resp.msg, {icon: 0});
                            }
                        }).fail(function () {
                            layer.msg('解绑失败！', {icon: 5});
                        });

                    });
                return false;
            });
            //绑定邮箱
            form.on('submit(bindEmailBtn)', function (data) {
                $.post('/user/bindEmail', data.field, function (resp) {
                    console.log(resp)
                    if (resp.code === 500) {
                        layer.msg(resp.msg, {icon: 5});
                    } else if (resp.code === 200) {
                        layer.msg("修改成功！", {icon: 6});
                        $("#unbindEmailBtn").show()
                    } else {
                        layer.msg(resp.msg, {icon: 0});
                    }
                }).fail(function () {
                    layer.msg('修改失败！', {icon: 5});
                });
                return false;
            });
            //解绑邮箱
            form.on('submit(unbindEmailBtn)', function (data) {
                layer.confirm("<span class='text-danger'>邮箱是您接受系统消息重要途径，解绑之后将不能接收消息，且不能使用邮箱登录！确认解绑？</span>",
                    {
                        btn: ['确认', '取消']
                    }, function () {
                        $.post('/user/unbindEmail', data.field, function (resp) {
                            console.log(resp)
                            if (resp.code === 500) {
                                layer.msg(resp.msg, {icon: 5});
                            } else if (resp.code === 200) {
                                layer.msg("解绑成功！", {icon: 6});
                                form.val("bindEmailForm",{email:""})
                                $("#unbindEmailBtn").hide()
                            } else {
                                layer.msg(resp.msg, {icon: 0});
                            }
                        }).fail(function () {
                            layer.msg('解绑失败！', {icon: 5});
                        });

                    });
                return false;
            });
        });
        $("#sendCodeBtn").click(function (){
            let _this = $(this);
            let email = $("#email").val();
            if(email === null || email.trim() === "") {
                layer.msg("请输入邮箱！", {icon: 5});
                return;
            }
            $.post('/user/sendEmailCode',{email:email}, function (resp) {
                console.log(resp)
                if (resp.code === 500) {
                    layer.msg(resp.msg, {icon: 5});
                } else if (resp.code === 200) {
                    layer.msg("验证码已发送至邮箱！", {icon: 6});
                    _this.addClass("layui-disabled");
                    _this.attr("disabled","");
                    let s = 60;
                    let f = setInterval(function (){
                        _this.text(s+"秒后重试");
                        if(s === 0){
                            _this.removeClass("layui-disabled");
                            _this.removeAttr("disabled");
                            _this.text("获取验证码");
                            clearInterval(f);
                        }
                        s -= 1;
                    },1000);
                } else {
                    layer.msg(resp.msg, {icon: 0});
                }
            }).fail(function () {
                layer.msg('验证码发送失败！', {icon: 5});
            });
        });

        $("#cleanLoginLogBtn").click(function (){
            $.post("/user/cleanLoginLog",{},function(resp){
                if(resp.code === 200){
                    $("#loginLogBody").empty()
                        .append("<tr><td colspan='5'><span>暂无登录日志！</span></td></tr>");
                    getLoginLog(1,10)
                    layer.msg("日志已清空！", {icon: 6});
                }else{
                    layer.msg(resp.msg, {icon: 5});
                }
            }).fail(function () {
                layer.msg('操作失败，请稍后重试！', {icon: 5});
            });
        });
        function getLoginLog(pageNum,pageSize) {
            $.get("/user/loginLog?pageNum="+pageNum+"&pageSize="+pageSize,function (resp) {
                if(resp.code === 200){
                    let data = resp.data;
                    $("#loginLogBody").html(data.html)
                    layui.use('laypage', function(){
                        let page = layui.laypage;
                        //执行一个laypage实例
                        page.render({
                            elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
                            limit: data.page.pageSize,
                            curr:data.page.pageNum,
                            count: data.page.total, //数据总数，从服务端得到
                            limits:[5,10,15,20],
                            theme:'#1E9FFF',
                            layout:['count','prev', 'page', 'next','limit'],
                            jump: function(obj, first){
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj);
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                //首次不执行
                                if(!first){
                                    getLoginLog(obj.curr, obj.limit);
                                }
                            }
                        })
                    });
                }
            })
        }

    </script>
</html>